<template>
  <Form
    :form="form"
    :labelCol="6"
    :previewTextPlaceholder="vnode"
    :wrapperCol="10"
  >
    <SchemaField>
      <SchemaStringField
        default="Hello world"
        title="文本预览"
        x-component="Input"
        x-decorator="FormItem"
      />
      <SchemaStringField
        :default="['123', '222']"
        :enum="[
          { label: 'A111', value: '123' },
          {
            label: 'A222',
            value: '222',
          },
        ]"
        :x-component-props="{
          multiple: true,
        }"
        title="选择项预览"
        x-component="PreviewText.Select"
        x-decorator="FormItem"
      />
      <SchemaStringField
        default="2020-11-23 22:15:20"
        title="日期预览"
        x-component="PreviewText.DatePicker"
        x-decorator="FormItem"
      />
      <SchemaStringField
        :default="['2020-11-23 22:15:20', '2020-11-24 22:15:20']"
        title="日期范围预览"
        x-component="PreviewText.DatePicker"
        x-decorator="FormItem"
      />
      <!--      <SchemaStringField-->
      <!--        x-decorator="FormItem"-->
      <!--        title="Cascader预览"-->
      <!--        x-component="PreviewText.Cascader"-->
      <!--        :default="['hangzhou', 'yuhang']"-->
      <!--        :enum="[-->
      <!--          { label: '杭州', value: 'hangzhou' },-->
      <!--          { label: '余杭', value: 'yuhang' },-->
      <!--        ]"-->
      <!--      />-->
    </SchemaField>
    <FormButtonGroup alignFormItem>
      <Button
        @click="
          () => {
            form.setState((state) => {
              state.editable = !state.editable
            })
          }
        "
      >切换阅读态
      </Button
      >
    </FormButtonGroup>
  </Form>
</template>

<script>
import {h} from '@vue/composition-api'
import {createForm} from '@formily/core'
import {createSchemaField} from '@formily/vue'
import {
  Form,
  FormItem,
  Input,
  PreviewText,
  FormButtonGroup,
} from '@formily/vxe-table/src'
import {Button} from 'vxe-table'

const fields = createSchemaField({
  components: {
    FormItem,
    Input,
    PreviewText,
  },
})

export default {
  components: {
    Form,
    FormButtonGroup,
    Button,
    ...fields,
  },
  data() {
    const form = createForm()
    return {
      form,
      vnode: () => h('div', {}, '123'),
    }
  },

  mounted() {
  },
}
</script>
